@use '../modules' as *;
@forward 'buttons';

notebook {
  > header {
    padding: 1px;
    border-width: 1px;
    background-clip: padding-box;
    background-color: $window_bg_color;
    border-color: $border_color;

    tabs { margin: -1px; }

    &.top, &.bottom, &.left, &.right {
      > tabs > tab {
        &:hover { background-color: $hover_color; }
      }
    }

    &.top {
      border-bottom-style: solid;
      > tabs {
        margin-bottom: -2px;
        > tab:not(.reorderable-page) {
          &:hover { box-shadow: inset 0 -4px $border_color; }
          &:checked { box-shadow: inset 0 -4px $accent_bg_color; }
        }
      }
    }

    &.bottom {
      border-top-style: solid;
      > tabs {
        margin-top: -2px;
        > tab:not(.reorderable-page) {
          &:hover { box-shadow: inset 0 4px $border_color; }
          &:checked { box-shadow: inset 0 4px $accent_bg_color; }
        }
      }
    }

    &.left {
      border-right-style: solid;
      > tabs {
        margin-right: -2px;
        > tab:not(.reorderable-page) {
          &:hover { box-shadow: inset -4px 0 $border_color; }
          &:checked { box-shadow: inset -4px 0 $accent_bg_color; }
        }
      }
    }

    &.right {
      border-left-style: solid;
      > tabs {
        margin-left: -2px;
        > tab:not(.reorderable-page) {
          &:hover { box-shadow: inset 4px 0 $border_color; }
          &:checked { box-shadow: inset 4px 0 $accent_bg_color; }
        }
      }
    }

    &.top > tabs > arrow {
      @extend %notebook_vert_arrows;

      border-top-style: none;
    }

    &.bottom > tabs > arrow {
      @extend %notebook_vert_arrows;

      border-bottom-style: none;
    }

    @at-root %notebook_vert_arrows {
      margin-left: -5px;
      margin-right: -5px;
      padding-left: 4px;
      padding-right: 4px;

      &.down { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }

      &.up { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic'); }
    }

    &.left > tabs > arrow {
      @extend %notebook_horz_arrows;

      border-left-style: none;
    }

    &.right > tabs > arrow {
      @extend %notebook_horz_arrows;

      border-right-style: none;
    }

    @at-root %notebook_horz_arrows {
      margin-top: -5px;
      margin-bottom: -5px;
      padding-top: 4px;
      padding-bottom: 4px;

      &.down { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }

      &.up { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
    }

    > tabs > arrow {
      @extend %button_basic;

      @extend %button_basic_flat;

      min-height: 16px;
      min-width: 16px;
      border-radius: 0;

      &:hover:not(:active) {
        box-shadow: none;
      }

      &:disabled { @include button(undecorated); }
    }

    tab {
      min-height: 30px;
      min-width: 30px;
      padding: 3px 12px;

      color: $window_fg_color;
      font-weight: normal;

      border-width: 0px;         // for reorderable tabs
      border-color: transparent; //

      &.reorderable-page {
        -gtk-outline-radius: calc($button_radius + 2px);
        margin: 4px 2px;
        border-radius: $button_radius;
        @include focus-ring($transition: $button_transition);

        &:hover {
          background-color: $hover_color;
          box-shadow: none;
        }
        &:checked {
          background-color: $selected_color;
          box-shadow: none;
          &:hover { background-color: $selected_hover_color; }
        }
      }

      // colors the button like the label, overridden otherwise
      button.flat {
        color: gtkalpha(currentColor, 0.3);
        padding: 0;
        margin-top: 4px;
        margin-bottom: 4px;
        min-width: 20px;
        min-height: 20px;
        border-radius: 100%;

        &:hover {
          color: currentColor;
          background-color: $adw_button_hover;
        }
        &:active { background-color: $adw_button_active; }

        &, &:backdrop { color: gtkalpha(currentColor, 0.3); }

        &:last-child {
          margin-left: 4px;
          margin-right: -4px;
        }

        &:first-child {
          margin-left: -4px;
          margin-right: 4px;
        }
      }
    }

    &.top,
    &.bottom {
      tabs {
        padding-left: 4px;
        padding-right: 4px;

        &:not(:only-child) {
          margin-left: 3px;
          margin-right: 3px;

          &:first-child { margin-left: -1px; }
          &:last-child { margin-right: -1px; }
        }

        tab {
          margin-left: 4px;
          margin-right: 4px;

          &.reorderable-page {
            border-style: none;
            margin-left: 0px;
            margin-right: 0px;
          }
        }
      }
    }

    &.left,
    &.right {
      tabs {
        padding-top: 4px;
        padding-bottom: 4px;

        &:not(:only-child) {
          margin-top: 3px;
          margin-bottom: 3px;

          &:first-child { margin-top: -1px; }
          &:last-child { margin-bottom: -1px; }
        }

        tab {
          margin-top: 4px;
          margin-bottom: 4px;

          &.reorderable-page {
            border-style: none solid;
            margin-top: 0px;
            margin-bottom: 0px;
          }
        }
      }
    }

    &.top tab { padding-bottom: 4px; }
    &.bottom tab { padding-top: 4px; }
  }

  > stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
    background-color: $view_bg_color;
  }
}
